<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://www.51xuecheng.cn/static/img/asset-favicon.ico">
    <title>注册</title>
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/plugins/normalize-css/normalize.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/plugins/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/css/page-learing-student-register.css" />
</head>

<body>
<!-- 页面头部 -->
<!--#include virtual="/include/header.html"-->
    <!-- 页面 -->
    <div class="register">

        <div id="registerarea" class="register-body">
            <img src="http://www.51xuecheng.cn/static/img/page-register_img.jpg" alt="" class="register-ico" width="460">
            <form class="form-horizontal required-validate" id="regStudentForm">
                <ul class="r-position student">
                    <li>
                        <div class="page-header">
                            <h3>欢迎注册学成在线</h3>
							已经有账号，去<a href="http://www.51xuecheng.cn/sign.html">登录</a>
                        </div>
						
                    </li>
                    <li>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机号码</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="cellphone" placeholder="请输入手机号码" v-model="formdata.cellphone">
                                <span class="verif-span"></span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">验证码</label>
                            <div class="col-sm-9 verif">
                                <input type="text" class="form-control" name="checkcodek" placeholder="请输入验证码" v-model="formdata.checkcode">
                                <button class="btn btn-default send" type="button" @click="sendcheckcode()">发送验证码</button>
                                <input type="hidden" class="form-control" name="checkcodekey"  v-model="formdata.checkcodekey">
                                <span class="verif-span"></span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">账号</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="username" placeholder="请输入账号" v-model="formdata.username">
                                <span class="verif-span"></span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">昵称</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="nickname" placeholder="请输入昵称"  v-model="formdata.nickname">
                                <span class="verif-span"></span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">邮箱</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="email" placeholder="请输入邮箱" v-model="formdata.email">
                                <span class="verif-span"></span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">密码</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" name="password" placeholder="请输入密码" v-model="formdata.password">
                                <span class="verif-span"></span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">确认密码</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" name="confirmpwd" placeholder="确认密码" v-model="formdata.confirmpwd">
                                <span class="verif-span"></span>
                            </div>
                    </li>
                    <li class="mag-left">
                        <div class="checkbox">
                            <label>
                        <input type="checkbox" checked>同意协议并注册
                        <a href="javascript:;">《学成在线注册协议》</a>
                    </label>
                        </div>
                    </li>
                    <li class="mag-left">
                        <button name="register" type="button" class="btn btn-primary" @click="registerSubmit">完成注册</button>
                    </li>
                </ul>
            </form>
            </div>
           
            <div class="register-footer">
                <br/><br/><br/><br/><br/>
                <!--底部版权-->
                <!--#include virtual="/include/footer.html"-->
            </div>
        </div>
        <!-- 页面 css js -->
        <script type="text/javascript" src="../plugins/jquery/dist/jquery.js"></script>
        <script type="text/javascript" src="../plugins/bootstrap/dist/js/bootstrap.js"></script>
        <script src="../js/page-learing-student-register.js"></script>

        <script>
            /*手机验证码*/
            const getCheckCodeByCellphone = (cellphone) => {
                return  requestPostForm('/api/checkcode/phone?param1='+cellphone,{});
            }

            /*注册*/
              const registerfun = (params) => {
                return  requestPost('/api/auth/register',params);
            }
            var countdowntime=0;
                      var registerareaVm= new Vue({  
                             el: "#registerarea", 
                             data: {
                               formdata:{
                                   cellphone:'',
                                   username:'',
                                   email:'',
                                   nickname:'',
                                   password:'',
                                   confirmpwd:'',
                                   checkcodekey:'',
                                   checkcode:''
                               }
                 
                             },
                             methods: {
                              sendcheckcode(){
                                  if(countdowntime>0){
                                      return;
                                  }
                                  if(!this.formdata.cellphone){
                                    this.$message.error('请输入手机号')
                                    return ;
                                  }
                                  //手机找回
                                  getCheckCodeByCellphone(this.formdata.cellphone).then(res=>{
                                          //倒计时
                                          this.countdown()
                                          if(res&&res.key){
                                              this.formdata.checkcodekey=res.key
                                              this.$message.success('向手机发送验证码成功，请查收')
                                          }
                                         
                                      }).catch(error=>{
                                          if(error&&error.response.data.errMessage){
                                              this.$message.error(error.response.data.errMessage)
                                          }else{
                                              this.$message.error('出错了')
                                          }
                                         
                                      })
                              },
                              countdown(){
                                    countdowntime = 5;
                                  var time = setInterval(function(){
                                          $('.send').removeClass('btn-default').addClass('btn-success');
                                          countdowntime--;
                                          $('.send').text( countdowntime + '秒后重发');
                                          if(countdowntime == 0){
                                              $('.send').removeClass('btn-success').addClass('btn-default')
                                              $('.send').text('发送验证码');
                                              clearInterval(time);
                                          }
                                      },1000)
                                  
                                 
                              },
                              registerSubmit(){
                                registerfun(this.formdata).then(res=>{
                                    this.$message.success('注册成功请登录')
                                  }).catch(error=>{
          
                                  })
                              }
                 
                             },
                             created() {
                              
                             },
                             mounted(){
                                
                             }
                           })
                 </script>
</body>